<template>
	<view>
		<view class="flex flex-center">
			<view class="time bg-w flex flex-center font28 color-8E8E8E">
			    {{ formatDate(new Date(dataItem.create_time)) || dataItem.create_time }}
			</view>
		</view>	
		<view class="msg-content bg-w">
			<view class="flex flex-align-center">
				<image 
					v-if="dataItem.type == 1" 
					style="width: 56rpx;height: 56rpx;"
					src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/msg/ic_system.png" mode=""
				></image>
				<image
					v-else
					style="width: 56rpx;height: 56rpx;"
					src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/msg/ic_business.png" mode=""
				></image>
				<text class="font36 color-b3 f-b m-l-20">
					{{ dataItem.title }}
				</text>
				<view class="read-status m-l-20"></view>
			</view>
			<view class="content-text font28 color-8E8E8E m-t-20" v-html="dataItem.content">
			</view>
							<!-- {{ dataItem.content }} -->
		</view>	
	</view>
</template>

<script setup lang="ts">
	import { formatDate } from '@/util/date';
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		}
	})
</script>

<style lang="scss">
	.time {
		height: 64rpx;
		border-radius: 36rpx;
		padding: 0 26rpx;
		margin: 30rpx 0 20rpx 0;
	}
	.msg-content {
		border-radius: 30rpx;
		padding: 34rpx 30rpx 30rpx;
		.read-status {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: #FE3030;
		}
	}
	.content-text {
		line-height: 56rpx;
	}
</style>
